<span>
<input type="hidden" id="clientId" name="clientId" value="1;3;"/>
<table>
<tbody>
<tr>
<td>
	<fieldset class="SelectManyControl_fieldset">
	    <legend class="SelectManyControl_legend">Available items</legend>
	    <select id="clientId:leftList" size="8" multiple="multiple" style="width:200px">
			<option value="0">item0</option><option value="2">item2</option><option value="4">item4</option><option value="5">item5</option><option value="6">item6</option><option value="7">item7</option>
	    </select>
	</fieldset>
</td>
<td>
	<table>
	<tbody>
	<tr><td>
		<input type="button" onclick="document.getElementById('clientId').fAdd()" value="&gt;" style="width:25px"/>
	</td></tr>
	<tr><td>
		<input type="button" onclick="document.getElementById('clientId').fAddAll()" value="&gt;&gt;" style="width:25px"/>
	</td></tr>
	<tr><td>
		<input type="button" onclick="document.getElementById('clientId').fRemove()" value="&lt;" style="width:25px"/>
	</td></tr>
	<tr><td>
		<input type="button" onclick="document.getElementById('clientId').fRemoveAll()" value="&lt;&lt;" style="width:25px"/>
	</td></tr>
	</tbody>
	</table>	
</td>
<td>
	<fieldset class="SelectManyControl_fieldset">
	    <legend class="SelectManyControl_legend">Selected items</legend>
	    <select id="clientId:rightList" size="8" multiple="multiple" style="width:200px">
			<option value="1">item1</option><option value="3">item3</option>
	    </select>
	</fieldset>
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
//<![CDATA[
	document.getElementById("clientId").valuesArray = [0,1,2,3,4,5,6,7];

	document.getElementById("clientId").fAdd = function() {
		var leftList = document.getElementById("clientId:leftList");
		var rightList = document.getElementById("clientId:rightList");

		document.getElementById("clientId").fProcess(leftList, rightList, false);
		document.getElementById("clientId").fUpdateSelectionParam();
	}

	document.getElementById("clientId").fRemove = function() {
		var leftList = document.getElementById("clientId:leftList");
		var rightList = document.getElementById("clientId:rightList");

		document.getElementById("clientId").fProcess(rightList, leftList, false);
		document.getElementById("clientId").fUpdateSelectionParam();
	}
	
	document.getElementById("clientId").fAddAll = function() {
		var leftList = document.getElementById("clientId:leftList");
		var rightList = document.getElementById("clientId:rightList");

		document.getElementById("clientId").fProcess(leftList, rightList, true);
		document.getElementById("clientId").fUpdateSelectionParam();
	}

	document.getElementById("clientId").fRemoveAll = function() {
		var leftList = document.getElementById("clientId:leftList");
		var rightList = document.getElementById("clientId:rightList");

		document.getElementById("clientId").fProcess(rightList, leftList, true);
		document.getElementById("clientId").fSetSelectionParam("");
	}	

	document.getElementById("clientId").fProcess = function(list1, list2, moveAll) {	
		var child1 = list1.firstChild;
		var child2 = list2.firstChild;

		while(child1 != null) {
			var nextChild = child1.nextSibling;

			if (child1.nodeType == 1 && (child1.selected == true || moveAll)) {
				child1.selected = false;
				
				while (child2 != null) {
				    if (child2.nodeType == 1 && parseInt(child1.value) < parseInt(child2.value)) {
						list2.insertBefore(child1, child2);
						break;
					}

					child2 = child2.nextSibling;
				}
				
				if (child2 == null) {
					list2.appendChild(child1);
				}
			}

            child1 = nextChild;
		}
	}
	
	document.getElementById("clientId").fUpdateSelectionParam = function() {
		var rightList = document.getElementById("clientId:rightList");
		var options = rightList.options;
		
		var valuesArray = document.getElementById("clientId").valuesArray;
		var values = "";
		
		for (var i = 0; i < options.length; i++) {
			var option = options.item(i);
			values += valuesArray[parseInt(option.value)] + ";";
		}
		
		document.getElementById("clientId").fSetSelectionParam(values);
	}
	
	document.getElementById("clientId").fSetSelectionParam = function(values) {
		document.getElementById("clientId").value = values;
	}
//]]>	
</script>
</span>